<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 30px;
            height: 30px;
        }
        span{
            width:50px;   
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <img src="../js作业图/a0.png">
    <img src="../js作业图/a0.png">
    <img src="../js作业图/a0.png">
    <img src="../js作业图/a0.png">
    <img src="../js作业图/a0.png">
    <span></span>

    <script>
        let imgs = document.querySelectorAll("img")
        let p = document.querySelector("span")

        // img.src = "../js作业图/a1.png"
        for (let i = 0; i < imgs.length; i++) {
            let img = imgs[i]
            // img.onmouseenter = function () {
            //     for (let j = 0; j <= i; j++) {
            //         imgs[j].src = "../js作业图/a1.png"
            //     }
            //     img.addEventListener('mouseleave', leave)
            // }
            img.addEventListener('mouseenter', enter)
            img.addEventListener('mouseleave', leave)
            // img.onmouseleave = function () {
            //     for (let j = 0; j <= i; j++) {
            //         imgs[j].src = "../js作业图/a0.png"
            //     }
            // }
            img.onclick = function () {
                leaves()
                img.src = "../js作业图/a1.png"
                img.removeEventListener('mouseleave', leave)
                // img.removeEventListener('mouseenter', enter)
                // if (img.src = "../js作业图/a1.png") {
                //     // enter1()
                //     img.onclick = function () {
                //         leave()
                //         img.onclick()

                //     }

                // }



            }

            function leaves() {
                for (let j = imgs.length-1; j > i; j--) {
                    imgs[j].src = "../js作业图/a0.png"
                }
            }
            function leave() {
                for (let j = 0; j <= i; j++) {
                    imgs[j].src = "../js作业图/a0.png"

                }
                p.innerHTML = ""

            }
            function enter1() {
                for (let j = 0; j <= i; j++) {
                    imgs[j].src = "../js作业图/a1.png"
                }
            }
            function enter() {
                text()
                // leaves()
                img.onclick()
                for (let j = 0; j <= i; j++) {
                    imgs[j].src = "../js作业图/a1.png"
                }
                img.addEventListener('mouseleave', leave)

            }
            function text() {
                switch(i){
                    case 0:
                        p.innerHTML = "差"
                        break
                    case 1:
                        p.innerHTML = "较差"
                        break
                    case 2:
                        p.innerHTML = "较好"
                        break
                    case 3:
                        p.innerHTML = "很好"
                        break
                    case 4:
                        p.innerHTML = "非常好"
                        break
                    default:
                        break
                }
                
            }
        }
    </script>
</body>

</html>